<template>
  <el-card :bordered="false" class="addLevel avue_height">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <div class="tishi">
      <i class="el-icon-warning"></i>
      <span>注意：会员的等级范围为数字LV1~LV10；等级依次增高</span>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
      style="margin-top:20px"
    >
      <el-col :span="24">
        <el-form-item label="等级名称：" prop="gradeName">
          <el-input v-model="ruleForm.gradeName" style="width:30%"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="会员等级：" prop="gradeLevel">
          <el-select v-model="ruleForm.gradeLevel" placeholder="请选择会员等级" style="width:30%">
            <el-option
              v-for="item in hydjList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="等级条件：">
          <div style="margin-bottom:10px">
            <span>积分 >=</span>
            <el-input v-model="ruleForm.integralAmount" :min="0" type="number" style="width:20%"></el-input>
          </div>
          <div style="margin-bottom:10px">
            <span>储值 >=</span>
            <el-input v-model="ruleForm.storedAmount" :min="0"  type="number" style="width:20%"></el-input>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="会员有效期：" prop="validityday">
          <el-radio-group v-model="ruleForm.validityday">
            <el-radio label="00">永久有效</el-radio>
            <el-radio label="01">降级</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="降级规则：" v-if="ruleForm.validityday == '01'" required>
          <el-col :span="24">
            <el-form-item prop="demotiondayAfter">
              获得等级
              <el-select v-model="ruleForm.demotiondayAfter" placeholder style="width:10%">
                <el-option
                  v-for="item in jiangjiList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>月后
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="demotiondayNear">
              如果近&nbsp;&nbsp;&nbsp;&nbsp;
              <el-select v-model="ruleForm.demotiondayNear" placeholder style="width:10%">
                <el-option
                  v-for="item in jiangjiList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>月未达到等级条件则降一级
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="选择权益：" required>
          <el-col :span="24">
            <el-form-item prop="integralRightsIds" label="积分权益">
              <el-checkbox-group v-model="ruleForm.integralRightsIds" @change="$forceUpdate()">
                <el-checkbox
                  v-for="item in integralRightsIdList"
                  :key="item.value"
                  :label="item.value"
                >{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="storedRightsIds" label="储值权益">
              <el-checkbox-group v-model="ruleForm.storedRightsIds" @change="$forceUpdate()">
                <el-checkbox
                  v-for="item in storedRightsIdList"
                  :key="item.value"
                  :label="item.value"
                >{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="gradeRightsIds" label="会员等级权益">
              <el-checkbox-group v-model="ruleForm.gradeRightsIds" @change="$forceUpdate()">
                <el-checkbox
                  v-for="item in gradeRightsIdList"
                  :key="item.value"
                  :label="item.value"
                >{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="会员等级状态：" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="01">启用</el-radio>
            <el-radio label="00">未启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <div class="content">
        <el-button @click="sure()" type="primary">确定</el-button>
        <el-button @click="close()">取消</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.addLevel {
  .tishi {
    position: relative;
    padding: 8px 16px 8px 40px;
    background-color: rgba(255, 251, 230, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 229, 143, 1);
    border-radius: 4px;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;

    i {
      position: absolute;
      left: 15px;
      top: 11px;
      font-size: 14px;
      color: #ffbf00;
    }
  }
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .el-form-item {
    width: 100%;
  }
}
</style>
